<template>
    <view class="invoice">
        <view class="box bg-white">
            <!-- 发票类型 -->
            <view class="item flex row-between" @click="handleOpenInvoiceType">
                <view class="label">发票类型</view>
                <view class="content flex-1 flex row-right">
                    <text>{{ type == 0 ? '增值税电子普通发票' : '增值税专用发票' }}</text>
                    <u-icon name="arrow-right" size="22" v-if="formData.header_type == 1"></u-icon>
                </view>
            </view>

            <!-- 抬头类型 -->
            <view class="item flex row-between">
                <view class="label">抬头类型</view>
                <view class="content flex-1 flex row-right">
                    <u-radio-group v-model="formData.header_type">
                        <u-radio
                            v-for="(item, index) in list"
                            :key="index"
                            :name="item.header_type"
                            :disabled="item.disabled"
                            :active-color="colorConfig.primary"
                        >
                            {{ item.name }}
                        </u-radio>
                    </u-radio-group>
                </view>
            </view>

            <!-- 发票抬头 -->
            <view class="item flex row-between">
                <view class="label">发票抬头</view>
                <view class="content">
                    <u-input
                        v-model="formData.name"
                        input-align="right"
                        placeholder="填写需要开具发票的姓名"
                    />
                </view>
            </view>

            <!-- 税号 -->
            <view class="item flex row-between" v-show="formData.header_type === 1">
                <view class="label">税号</view>
                <view class="content flex-1 flex row-right">
                    <u-input
                        v-model="formData.duty_number"
                        input-align="right"
                        placeholder="纳税人识别号"
                    />
                </view>
            </view>

            <!-- 邮箱 -->
            <view class="item flex row-between">
                <view class="label">邮箱</view>
                <view class="content flex-1 flex row-right">
                    <u-input
                        v-model="formData.email"
                        input-align="right"
                        placeholder="您的联系邮箱"
                    />
                </view>
            </view>

            <!-- 企业地址 -->
            <view class="item flex row-between" v-show="type == 1 && formData.header_type == 1">
                <view class="label">企业地址</view>
                <view class="content flex-1 flex row-right">
                    <u-input v-model="formData.address" input-align="right" placeholder="必填" />
                </view>
            </view>

            <!-- 企业电话 -->
            <view class="item flex row-between" v-show="type == 1 && formData.header_type == 1">
                <view class="label">企业电话</view>
                <view class="content flex-1 flex row-right">
                    <u-input v-model="formData.mobile" input-align="right" placeholder="必填" />
                </view>
            </view>

            <!-- 开户银行 -->
            <view class="item flex row-between" v-show="type == 1 && formData.header_type == 1">
                <view class="label">开户银行</view>
                <view class="content flex-1 flex row-right">
                    <u-input v-model="formData.bank" input-align="right" placeholder="必填" />
                </view>
            </view>

            <!-- 银行账号 -->
            <view class="item flex row-between" v-show="type == 1 && formData.header_type == 1">
                <view class="label">银行账号</view>
                <view class="content flex-1 flex row-right">
                    <u-input
                        v-model="formData.bank_account"
                        input-align="right"
                        placeholder="必填"
                    />
                </view>
            </view>
        </view>

        <view class="footer">
            <view class="" v-if="order_id && shop_id">
                <button class="submit-btn br60 white btn" size="lg" @click="handleInvoiceAdd">
                    提交申请
                </button>
            </view>
            <view class="" v-if="invoice_id && shop_id">
                <button class="submit-btn br60 white btn" size="lg" @click="handleInvoiceEdit">
                    提交编辑
                </button>
            </view>
            <view class="" v-if="shop_id && !invoice_id && !order_id">
                <button class="submit-btn br60 white btn" size="lg" @click="handleConfirm">
                    确定
                </button>
            </view>
            <view class="m-t-40">
                <button class="cancel-btn br60 white btn" size="lg" @click="handleCancel">
                    不开发票
                </button>
            </view>
        </view>

        <!-- 发票类型选择 -->
        <u-popup
            v-model="showCoupon"
            border-radius="14"
            mode="bottom"
            closeable
            :safe-area-inset-bottom="true"
            @open="type = formData.type"
            @close="handleCloseInvoiceType"
        >
            <view class="p-30 bg-body">
                <view class="text-center">发票类型选择</view>
            </view>
            <view class="invoice-type bg-body">
                <!-- 普票 -->
                <view class="invoice-type--item bg-white flex row-between" @click="type = 0">
                    <view>
                        <view class="nr black">增值税电子普通发票</view>
                        <view class="xs lighter m-t-14">默认发送至所提供的电子邮件</view>
                    </view>
                    <u-checkbox :value="type == 0" shape="circle" name="0"></u-checkbox>
                </view>
                <!-- 专票 -->
                <view
                    class="invoice-type--item bg-white flex row-between"
                    @click="type = 1"
                    v-show="spec_invoice"
                >
                    <view>
                        <view class="nr black">增值税专用发票</view>
                        <view class="xs lighter m-t-14">纸质发票开出后将以邮寄形式交付</view>
                    </view>
                    <u-checkbox :value="type == 1" shape="circle" name="1"></u-checkbox>
                </view>
                <!-- 底部确认按钮 -->
                <view class="invoice-type-confirm-btn">
                    <button class="confirm br60 white btn" size="lg" @click="handleChoise">
                        确定
                    </button>
                </view>
            </view>
        </u-popup>
    </view>
</template>

<script>
import { getInvoiceSetting, apiInvoiceAdd, apiInvoiceEdit, apiInvoiceDetail } from '@/api/shop.js'
import { invoiceType } from '@/utils/type.js'
export default {
    data() {
        return {
            shop_id: '', // 商家ID
            invoice_id: '', // 发票ID （编辑时
            order_id: '', // 订单ID （添加时
            showCoupon: false,
            list: [
                {
                    name: '个人',
                    header_type: 0,
                    disabled: false
                },
                {
                    name: '企业',
                    header_type: 1,
                    disabled: false
                }
            ],
            formData: {
                id: '', //  必填 int 发票id
                order_id: '', //	必填	int	订单id
                type: 0, //	必填	int	发票类型 0-普通 1-专用
                header_type: 0, //	必填	int	抬头类型 0-个人 1-企业
                name: '', //	必填	string	抬头名称
                duty_number: '', //	否	string	税号
                email: '', //	否	string	邮箱
                mobile: '', //	否	string	企业电话
                address: '', //	否	string	企业地址
                bank: '', //	否	string	开户行
                bank_account: '' //	否	string	银行账号
            },
            type: 0, //
            open_invoice: 0, // 发票开关 0- 关闭 1-开启
            spec_invoice: 0 // 是否支持专票 0-不支持 1-支持
        }
    },
    methods: {
        // 初始化发票
        initInvoiceSetting() {
            getInvoiceSetting({
                shop_id: this.shop_id
            }).then((res) => {
                this.spec_invoice = res.data.spec_invoice
                if (res.data.open_invoice) this.open_invoice = res.data.open_invoice
                else this.$toast({ title: '当前店铺暂未开启发票' })
            })
        },
        // 获取发票详情
        getInvoiceDetail() {
            apiInvoiceDetail({ id: this.invoice_id }).then((res) => {
                for (const key in res.data) {
                    if (!this.formData.hasOwnProperty(key)) continue
                    this.formData[key] = res.data[key]
                }
            })
        },
        initRules() {
            const form = this.formData
            if (!this.open_invoice) {
                this.$toast({ title: '当前店铺暂未开启发票' })
                return false
            }
            if (!form.name) {
                this.$toast({ title: '请输入发票抬头' })
                return false
            }
            if (!form.duty_number && form.header_type == 1) {
                this.$toast({ title: '请输入税号' })
                return false
            }
            if (!form.email) {
                this.$toast({ title: '请输入邮箱地址' })
                return false
            }
            if (!/^[0-9a-zA-Z_.-]+[@][0-9a-zA-Z_.-]+([.][a-zA-Z]+){1,2}$/.test(form.email)) {
                this.$toast({ title: '邮箱输入有误,请重新输入' })
                return false
            }
            if (!form.address && form.header_type == 1 && form.type == 1) {
                this.$toast({ title: '请输入企业地址' })
                return false
            }
            if (!form.mobile && form.type == 1) {
                this.$toast({ title: '请输入手机号码' })
                return false
            }
            if (!form.bank && form.header_type == 1 && form.type == 1) {
                this.$toast({ title: '请输入开户银行' })
                return false
            }
            if (!form.bank_account && form.header_type == 1 && form.type == 1) {
                this.$toast({ title: '请输入银行账号' })
                return false
            }
            return true
        },
        // 打开发票类型选择
        handleOpenInvoiceType() {
            if (this.formData.header_type == 0) return
            this.showCoupon = true
        },
        // 关闭发票类型选择
        handleCloseInvoiceType() {
            if (this.type != this.formData.type) {
                this.type = this.type == 1 ? 0 : 1
            }
        },
        // 选择发票类型
        handleChoise() {
            this.formData.type = this.type
            this.showCoupon = false
        },
        // 确定发票（订单下单时
        handleConfirm() {
            if (!this.initRules()) return
            uni.$emit('invoice', { ...this.formData, shop_id: this.shop_id })
            uni.navigateBack()
        },
        // 确认添加
        handleInvoiceAdd() {
            if (!this.initRules()) return
            apiInvoiceAdd({ ...this.formData, order_id: this.order_id }).then((res) => {
                if (res.code == 1) {
                    setTimeout(() => {
                        uni.navigateBack()
                    }, 500)
                }
            })
        },
        // 确认编辑
        handleInvoiceEdit() {
            if (!this.initRules()) return
            apiInvoiceEdit({ ...this.formData }).then((res) => {
                if (res.code == 1) {
                    setTimeout(() => {
                        uni.navigateBack()
                    }, 500)
                }
            })
        },
        // 不开发票
        handleCancel() {
            if (!this.order_id && !this.invoice_id) {
                uni.$emit('invoice', { del: true, shop_id: this.shop_id })
            }
            uni.navigateBack()
        }
    },

    onLoad() {
        const query = this.$Route.query
        switch (query.type * 1) {
            case invoiceType['SETTLEMENT']:
                this.shop_id = query.shop_id || ''
                if (query.invoice != '{}') {
                    this.formData = JSON.parse(query.invoice)
                    this.type = this.formData.type
                }
                break
            case invoiceType['ORDERDETAILEdit']:
                this.invoice_id = query.invoice_id || ''
                this.shop_id = query.shop_id || ''
                this.getInvoiceDetail()
                break
            case invoiceType['ORDERDETAILADD']:
                this.order_id = query.order_id || ''
                this.shop_id = query.shop_id || ''
                break
        }
        // 初始化发票
        this.initInvoiceSetting()
    }
}
</script>

<style lang="scss">
.invoice {
    height: calc(100vh - env(safe-area-inset-bottom));
    padding: 24rpx;
    position: relative;

    .box {
        padding: 20rpx 0;
        border-radius: 16rpx;

        .item {
            padding: 16rpx 30rpx;

            .label {
                font-size: 28rpx;
                color: $-color-black;
            }

            .content {
                min-width: 440rpx;
            }
        }
    }

    .footer {
        left: 0;
        bottom: 0;
        width: 100%;
        padding: 24rpx;
        position: absolute;
        .btn {
            height: 88rpx;
        }
        .submit-btn {
            color: $-color-white;
            background-color: #e39b37;
        }
        .cancel-btn {
            color: #e39b37;
            background-color: $-color-white;
        }
    }

    .invoice-type {
        padding: 40rpx;
        padding-bottom: 0;

        .invoice-type--item {
            padding: 28rpx 36rpx;
            border-radius: 40rpx;
            margin-bottom: 30rpx;
        }

        .invoice-type-confirm-btn {
            padding: 90rpx 0 50rpx 0;

            .confirm {
                background-color: #ff9e1e;
            }
        }
    }
}
</style>
